<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>事件处理</h2>
    <p>count: {{ count }}</p>
    <!-- 内联事件处理器 -->
    <!-- <button v-on:click="count++">btn</button> -->

    <!-- 方法事件处理器 -->
    <!-- 默认情况下，小括号可以加也可以不加 -->
    <!-- 加上小括号就可以进行传参了 -->
    <button v-on:click="handleClick(1)">btn</button>
    <button v-on:click="handleClick(2)">btn</button>


    <hr>

    <!-- v-on是可以缩写成@ -->
    <!-- 默认情况下，我们可以直接获取到事件参数event，但是不能加小括号 -->
    <!-- 如果加了小括号，还想拿到event对象，需要手动传入实参$event -->
    <button @click="getEvent(111, $event)">获取事件参数event</button>
  </div>


  <script src="../vue3.js"></script>
  <script>
    const {createApp} = Vue;
    createApp({
      data() {
        return {
          count: 1,
        }
      },
      methods: {
        handleClick(n) {
          // this.count++;
          this.count += n;
        },
        getEvent(n, e) {
          console.log(n, e);
        }
      }
    }).mount("#app");
  </script>
</body>
</html>